<template>
	<view :class="pageClass" :style="pageStyle" v-if="pageReady">
			<moxi-nav :set="navSet" ></moxi-nav> 
			<view v-for="(mod,mk) in modData" :class="mod.mod_class"  :style="mod.css">
				<view v-if="mod.name=='pay'">
					<view style="display: flex;flex-direction: column;" v-if="data.id&&status==0">
						<view style="display: flex;flex-direction: column;justify-content: center;text-align: center;margin: 15px 0;">
							<text style="font-size: 14px;color: #666">{{data.body}}</text>
							<text style="margin: 8px 0;font-size: 19px;color: #333;">￥{{data.money}}</text>
							<view style="display: flex;flex-direction: row;text-align: center;justify-content: center;">
								<text style="font-size: 14px;color: #666">剩余支付时间：</text>
								<u-count-down v-if="expire>0" :time="expire" format="mm:ss" style="margin-top: -2px;"></u-count-down>
								<text style="font-size: 14px;color: #ff5500" v-else>订单支付超时</text>
							</view>
						</view>
						<view style="display: flex;flex-direction: column;align-items: center;margin-top: 15px;">
							<view style="width: 90%;display: flex;;flex-direction: column;" v-if="data.pay_list">
								<u-cell size="large"  v-for="(list,key) in data.pay_list" @click="pay_type=key">
									<text slot="value" style="color: #ffaa00;font-size: 12px;margin-right: 5px;" v-if="key=='yue'">当前余额：{{data.my_money}}</text>
									<text slot="title" style="color: #666;margin-left: 4px;">{{list.name}}</text>
									<u-icon slot="icon" size="21" :name="list.icon"></u-icon>
									<u-icon slot="right-icon" name="checkmark-circle" :color="key==pay_type?app_color:'#ccc'" size="22"></u-icon>
								</u-cell>
								<view style="margin-top: 40px;;">
									<u-button text="立即支付" style="margin-top:20px;;" @click="pay()" :color="app_color"></u-button>
								</view>
							</view>
						</view>
					</view>
					<view v-if="data.id&&status==1" style="display: flex;flex-direction: column;">
						<view :style="'height: 300px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color:'+app_color ">
							<u-icon name="checkmark-circle-fill" size="80" color="#fff"></u-icon>
							<text style="font-weight: 600;font-size: 21px;color: #fff;margin: 20px 0;">支付成功</text>
							<text style="font-size: 13px;color: #eee">您已付款成功，如有疑问请与客服联系！</text>
							<view style="margin-top: 20px;">
								<view style="height: 20px;border-radius: 25px;background: rgba(102,102,102,0.6);width: 700rpx;position: relative;">
									<view style="width: 650rpx;background-color: #fff;position: absolute;left: 25rpx;top: 10px;box-shadow: 0 0 10px #ccc;
									display: flex;flex-direction: column;align-items: center;padding: 15px 0;">
										<text :style="'margin-bottom:20px;font-size: 26px;font-weight: 600;color: '+app_color">￥{{data.money}}</text>
										<u-line dashed ></u-line>
										<view style="width: 100%;margin-top: 20px;">
											<view style="display: flex;flex-direction: row;justify-content: space-between;margin:8px 5px;">
												<text style="font-size: 13px;color: #666">订单编号</text>
												<text style="font-size: 13px;color: #666">{{data.pay_id}}</text>
											</view>
											<view style="display: flex;flex-direction: row;justify-content: space-between;margin:8px 5px;">
												<text style="font-size: 13px;color: #666">下单时间</text>
												<text style="font-size: 13px;color: #666">{{$u.timeFormat(data.end_time, 'yyyy年mm月dd日')}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="param.btn_name.length" style="text-align: center;margin-top: 150px;display: flex;align-items: center;flex-direction: row;justify-content: center;">
							<moxi-btn @click="btnClick()" width="600rpx" height="35px" :color="app_color" >{{param.btn_name}}</moxi-btn>
						</view>
					</view>
				</view>
			    <moxi-index v-else :list="mod"></moxi-index>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{},
				expire:0,
				pay_type:"",
				status:0,
				btn_name:"",//支付成功按钮
				path:"",//支付成功按钮点击跳转地址
				Interval:false
			}
		},
		onLoad() {
		
			this.get()
			this.pay_status();
		},
		methods: {
			pay_status(){//循环验证是否支付成功！
				if(this.param.pay_id){
					let self = this;
					this.Interval = setInterval(function(){
						if(self.status==1){
							clearInterval(self.Interval);
							return;
						}
						self.moxiPost('/index/app/pay_status',{pay_id:self.param.pay_id},function(data){
							if(data.data == 'success'){
							self.status = 1;
							}
						},false)
					},2000)
				}
			},
			btnClick(){
				if(this.param.path.length){
					this.param.path = decodeURIComponent(this.param.path);
					this.navto(this.param.path,true);
				}
			},
			get(){
				let self = this;
				this.moxiPost('/index/app/pay_info',{pay_id:this.param.pay_id},function(data){
					self.data = data.data;
					self.status = data.data.status;
					self.pay_type = data.data.pay_default;
					if(data.data.id){
						const time = new Date().getTime()
						self.expire = (Number(data.data.pay_expire)*1000) - time
					}
					
				})
			},
			pay(){
				if(this.expire<0){
					this.msg('订单已超时');
					return false;
				}
				if(this.pay_type=='weixin'){
					this.weixin()
				}else if(this.pay_type=='alipay'){
					this.alipay()
				}else if(this.pay_type=='yue'){
					this.yue()
				}else if(this.pay_type=='baidu'){
					this.baidu()
				}else if(this.pay_type=='toutiao'){
					this.toutiao()
				}else if(this.pay_type=='qq'){
					this.qq()
				}
			},
			yue(){
				let self = this;
				this.moxiPost('/index/app/pay',
				{pay_id:this.param.pay_id,pay_type:this.pay_type}
				,function(data){
				self.status = 1;
				})
			},
			alipay(){
				let self = this;
				uni.login({
					success:(res)=>{
						const code = res.code;
						this.moxiPost('/index/app/pay',{code:code,pay_id:this.param.pay_id,pay_type:this.pay_type},function(data){
							let pay_param = {
								provider:"alipay",
								orderInfo:data.data
							}
							uni.requestPayment(pay_param);
						})
					}
				})
			},qq(){
				let self = this;
				this.moxiPost('/index/app/pay',{pay_id:this.param.pay_id,pay_type:this.pay_type},function(data){
					uni.requestPayment({
						provider:'qq',
						package:'prepay_id='+data.data,
						success(e) {
						
						},fail(e) {
							console.log(e);
							self.msg('支付失败')
						}
					});
				})
			},toutiao(){
				let self = this;
				this.moxiPost('/index/app/pay',{pay_id:this.param.pay_id,pay_type:this.pay_type},function(data){
					uni.requestPayment({
						provider:'toutiao',
						orderInfo:data.data,
						service:5,
						success(e) {
						
						},fail(e) {
							self.msg('支付失败')
						}
					});
				})
			},baidu(){
				let self = this;
				this.moxiPost('/index/app/pay',{pay_id:this.param.pay_id,pay_type:this.pay_type},function(data){
					uni.requestPayment({
						provider:'baidu',
						orderInfo:data.data,
						success(e) {
						self.msg('支付成功！')
						},fail(e) {
							self.msg('支付失败')
						}
					});
				})
			},
			weixin(){
				let self = this;
				uni.login({
					success:(res)=>{
						const code = res.code;
						this.moxiPost('/index/app/pay',{code:code,pay_id:this.param.pay_id,pay_type:this.pay_type},function(data){
							let pay_param = data.data;
							pay_param.provider = 'weixin';
							pay_param.success = function(){
								self.msg('支付成功！')
								self.status = 1;
							}
							pay_param.fail = function(){
								self.msg('支付失败')
							}
							uni.requestPayment(pay_param);
						})
					}
				})
			}
			
		}
	}
</script>

<style>

</style>
